<template>
  <el-dialog title="运动员二维码" class="gl_dialog_TitleLine" :visible.sync="dialogVisible" :before-close="close" width="440px">
    <div v-loading="loading" class="gl_mb_15">
      <div id="qrcode" ref="qrcode" />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="close()">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import QRCode from 'qrcodejs2';
export default {
  name: 'QRview',
  props: {
    qrCodeText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false
    };
  },
  methods: {
    // 打开弹窗
    open() {
      this.dialogVisible = true;
      this.loading = true;
      setTimeout(() => {
        this.createdQrCode();
        this.loading = false;
      }, 500);
    },
    // 关闭弹窗
    close() {
      this.$refs.qrcode.innerHTML = '';
      this.dialogVisible = false;
    },
    // 生成二维码
    createdQrCode() {
      var text = this.qrCodeText || '二维码';
      new QRCode('qrcode', {
        width: 200,
        height: 200,
        text: text
      });
    }
  }
};
</script>

